/*
    分离打包后的css文件（base64显示图片或url两种不同的css分离办法）

    之前打包css的过程，是在index.js中使用js在head标签内动态插入<style>标签的方式，这样打包后的文件只有index.js一个，
    这节课告诉我们如何多打包出另一个css文件，打包后采用<link href=/css1/index1.css?538dca98f6b052ab7f2c rel=stylesheet></head>引入

    如果修改之前课学的css引入图片url的limit属性值，仍会采用url引入或base64方式

    * 如果采用base64处理css中的url可以正常显示图片，但如果使用url（也就是图片大小大于limit的值），打包后的路径层级出错无法正常显示图片（css中的图片无法显示，index.html中的img不受影响），如：
      background-image: url(e7698f695dcb0ed98d062b4b87549c7b.png);，在非分离css模式下打包，图片输出在dist/下，这个路径是吻合的，但
      使用分离打包，有两种情况：
      （1）new extractTextPlugin('css/index.css')，图片可以正常打包，但是莫名其妙地加上css/层级，导致请求也可以访问css里的图片是404。有时候不加上css/层级，检查元素发现层级都是对的，把路径复制出来在地址栏输入访问也能显示，但打包后放在服务器上就是不显示。
      （2）new extractTextPlugin('index.css')这样可以正常显示也可以访问css里的图片
    但是建议配置publicPath，使用绝对路径访问，new extractTextPlugin('css/index.css')也可以访问css里的图片。但是index.html中img标签的可以正常显示；

    没有在output选项内添加publicPath，执行npm run server控制台启动打印了webpack output is served from /，添加publciPath控制台
    打印的是webpack output is served from http://192.168.31.163:1212/ ，难道是提示使用了公共绝对路径映射为...? 具体说不上来；
*/

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin'); // 代码压缩，不需安装就可使用
const htmlPlugin = require('html-webpack-plugin'); // 用来打包index.html文件，需要npm install --save-dev html-webpack-plugin，才能使用
const extractTextPlugin = require('extract-text-webpack-plugin'); // 为了能分离css，需要先npm install --save-dev extract-text-webpack-plugin安装

let webSite = { // 公共绝对路径
    publicPath: 'http://192.168.31.163:1717/' // 记得最后加上 /
};

module.exports = {
    entry: { // 入口配置项
        entry: './src/entry01.js' // 多入口文件1，file1可以任意写
    },
    output: { // 出口配置项
        path: path.resolve(__dirname, 'dist'), // 绝对路径
        filename: '[name].js', // 多出口文件名,动态[name]的值呼应entry选项里的entry1和entry2。这里的出口文件不是针对index.html
        //publicPath: webSite.publicPath
    },
    module: { // 打包css、图片转换、压缩，把sass转换为css、es6转换为浏览器兼容的代码、react的语法转换成js代码
        // module里都是loader，npm install完毕后不需通过require('')引入，而插件需要引入成一个对象，而后在plugins选项里使用
        rules: [
            {
                test:/\.css$/,
                //use:['style-loader','css-loader']
                use: extractTextPlugin.extract({ // 修改loader
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.(png|jpg|gif)/,
                use:[
                    {
                        loader: 'url-loader', // url-loader解决图片打包后的url或base64，使css中的url可以正常渲染。url-loader自带对file-loader的依赖，但是file-loader还是需要安装的
                        options: {
                            limit: 100 // 单位字节（b），大于等于这个数值的话拷贝这个图片到dist/下，生成url，小于的话在js里生成base64
                        }
                    }
                ]
            }
        ]
    },
    plugins: [ // 插件
        new htmlPlugin({ // 注1
            minify: { // 压缩
                removeAttributeQuotes: true // 删除index.html打包后的单引号和双引号
            },
            hash: true, // 打包后的index.html中的资源引用加上hash防止缓存，就是防止改完js、css文件运行后不起效果
            template: './src/index1.html' // 指定index.html模版。即便这里的index.html重命名成任意名称，但打包后的依旧是index.html
        }),
        new uglify(), // 不压缩index.html
        //new extractTextPlugin('./css/index.css') // css的base64解决方案：./css/index.css是打包后的css路径，这里的路径不是相对当前文件了，那如何确定这个路径呢？
        // 首先把dist目录视为参照目录，并且当前在dist/下的不存在的目录里，根据这个位置确定后面的路径，不知道这么说明白了吗
        // index.html的head标签内这样引用，<link href="./css/index.css?28b82f4116c3f4865125" rel="stylesheet">，
        // 这里也可以写成new extractTextPlugin('css/index.css')，但是打包出来的引用少了 ./ 变成
        // <link href="css/index.css?28b82f4116c3f4865125" rel="stylesheet">
        // 分离css打包后的图片输出在dist/下
        // 但不能写成new extractTextPlugin('/css/index.css')，查看资源时路径是<link href="/css/index.css?28b82f4116c3f4865125" rel="stylesheet">
        new extractTextPlugin('css/index.css') // css的url解决方案：css/index.css还是打包后的css路径，同样首先把dist目录视为参照目录，并且当前在dist/下的不存在的目录里，根据这个位置确定后面的路径，
        // 然后使用公共绝对路径分离打包css，head的引用会将公共路径拼接上'css/index.css'，如：
        // <link href="http://192.168.31.163:1717/css/index.css?efd68cbb67e6d3df902e" rel="stylesheet">，
        // 写成new extractTextPlugin('./css/index.css')也可以，因为将公共路径拼接上'./css/index.css'所以引用有点怪，如：
        // <link href="http://192.168.31.163:1717/./css/index.css?efd68cbb67e6d3df902e" rel="stylesheet">，
        // http://192.168.31.163:1717/ 映射的是 ./dist 这路径
        // 分离css打包后的图片同样输出在dist/下
        // 但不能写成new extractTextPlugin('/css/index.css'),查看资源时路径是<link href="/css/index.css?28b82f4116c3f4865125" rel="stylesheet">
    ],
    devServer: { // 开发服务(开发环境)
        contentBase: path.resolve(__dirname, 'dist'), // 热更新，监听资源绝对路径
        host: '192.168.31.163', // 服务器地址
        compress: true, // 启用服务器压缩
        port: 1717 // 端口，可以任意取
    }
}